<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取焦点-多次播放</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id ="app">
    <input type="text" placeholder="请输入单词" v-on:focus="playVoice"></input>
</div>

<script>
    new Vue({
        el:"#app",
        methods:{
            playVoice(){
                let count = 0
                const audio = new Audio("https://dict.youdao.com/dictvoice?type=1&audio=tutorial");
                audio.play().catch(error=>{
                    console.error("播放错误,Please check the url");
                })

                audio.addEventListener("ended",()=>{
                    count += 1;
                    if(count < 3){
                        audio.currentTime = 0;
                        audio.play().catch(error=>{
                            console.error("播放错误,Please check the url");
                        })
                    }
                })

            }
        }
    })
</script>


</body>
</html>